<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">

		</style>
	</head>
	<body>
		<div style="width: 800px;border: 1px solid #000000;overflow: hidden;">
			<input type="text" maxlength="10" style="outline: none;width: 100%;border: 0px;" onkeyup="up(event)" name=""
				id="input1" value="" />
			<input type="text" maxlength="10" style="outline: none;width: 100%;border: 0px;" onkeyup="up(event)"
				id="input2" value="" />
			<input type="text" maxlength="10" style="outline: none;width: 100%;border: 0px;" onkeyup="up(event)"
				id="input3" value="" />
			<input type="text" maxlength="10" style="outline: none;width: 100%;border: 0px;" onkeyup="up(event)"
				id="input4" value="" />
			<input type="text" maxlength="10" style="outline: none;width: 100%;border: 0px;" onkeyup="up(event)"
				id="input5" value="" />
		</div>
	</body>
</html>
<script type="text/javascript">
	window.onload = function() {
		document.getElementById("input1").focus()
	}

	function up(event) {
		//如果按了回车键，则将光标切到下一个输入框上
		console.log(event.keyCode)
		if (event.keyCode == 13) {
			let next = event.target.nextElementSibling;
			console.log(next)
			if (next) {
				next.focus()
			}
		}
		if (event.target.value.length == 0) {
			if (event.keyCode == 8) {
				let prev = event.target.previousElementSibling;
				if (prev) {
					prev.focus();
				}
			}
		}

	}
</script>
